<template>
	<div class="all">
		<!-- <div class="flex flexb" style="padding-bottom: 0.2rem;">
			<div :class="type == 1 ? 'act type':'type'">上传</div>
			<div :class="type == 2 ? 'act type':'type'">收藏</div>
			<div :class="type == 3 ? 'act type':'type'">点赞</div>
			<div :class="type == 4 ? 'act type':'type'">打赏</div>
		</div> -->
		<div class="list" style="margin-bottom: 0.2rem;">
			<div class="li" style="box-shadow: 2px 2px 5px #ccc;">
				<div><img :src="item.image"
						style="width: 1.8rem; height: 1.8rem; margin-right: 0.2rem; display: block;"></div>
				<div>
					<div style="line-height: 0.5rem; font-size: 0.32rem; color: #2D3038;">{{item.name}}</div>
					<div style="line-height: 0.5rem; font-size: 0.28rem; color:#868B98;">{{item.game_start}}</div>
					<div style="line-height: 0.5rem; font-size: 0.28rem; color:#868B98; margin-top: 0.3rem;">共{{item.count}}张图</div>
				</div>
			</div>
			
		</div>

		<div class="container-water-fall">

			<waterfall :col="col" :data="data" @loadmore="loadmore" gutterWidth="20">
				<template>
					<div class="cell-item" v-for="(item,index) in data" :key="index">
						<img v-if="item.thumb_name" :src="item.thumb_name" alt="加载错误">
						<!-- <div class="item-body">
							<div class="item-desc">{{item.title}}</div>
							<div class="item-footer">
								<div v-if="item.avatar" class="avatar"
									:style="{backgroundImage : `url(${item.avatar})` }"></div>
								<div class="name">{{item.user}}</div>
								<div class="like" :class="item.liked?'active':''">
									<i></i>
									<div class="like-total">{{item.like}}</div>
								</div>
							</div>
						</div> -->
					</div>
				</template>
			</waterfall>

		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'login',
		data() {
			return {
				id:"",
				type:"",
				tag:"",
				data: [],
				col: 2,
				list:"",
				page:1,
				total:"",
				item:""
			}
		},

		created() {
			this.item = JSON.parse(this.$route.query.item) 
			
			this.type = this.$route.query.type
			this.tag = this.$route.query.tag
			this.id = this.$route.query.id
		},

		methods: {
			getlist:function() {
				axios.get(this.urls+'/photographer/my_photos?page='+this.page+'&page_size=20&tag='+this.tag+'&type='+this.type+'&game_id='+this.id).then((response) => {
					if (response.data.msg.code == 0) {
						this.total = response.data.data.total
						for(let i in response.data.data.data){
							this.data.push(response.data.data.data[i])
						}
						
					}else{
						this.$toast(response.data.msg.info);
					}
				})
			},
			loadmore:function(){
				
				if(this.total > (this.data.length + 1)){
					this.page = parseInt(this.page) + 1
					this.getlist()
				}
				
			}
		},
		mounted() {
			this.getlist()
			// this.data = this.originData;
		}
		

	}
</script>


<style scoped lang="less">
	.all { padding-top: 0.1rem;
		.li {
			background: #FFFFFF;
			padding: 0.3rem;
			display: flex;
			margin-top: 0.2rem;
		}

		.type {
			text-align: center;
			border-bottom: 2px #eaeaea solid;
			padding-bottom: 0.1rem;
			font-size: 0.28rem;
		}

		.act {
			border-bottom: 2px #FF713B solid !important;
		}
	}

	.container-water-fall {

		box-sizing: border-box;

		.cell-item {
			width: 100%;
			// margin-bottom: 18px;
			background: #ffffff;
			border: 2px solid #F0F0F0;
			border-radius: 12px 12px 12px 12px;
			overflow: hidden;
			box-sizing: border-box;

			img {
				// border-radius: 12px 12px 0 0;
				width: 100%;
				height: auto;
				display: block;
			}
		}
	}
</style>
